<template>
  <div class="data">
    <div class="wrapper">
      <div class="header">
        <div @click="go" class="header_left iconfont icon-guanbi"></div>
        <div class="header_center" v-show="flag">选择日期</div>
        <div class="header_center" v-show="!flag">提交预订</div>
        <div class="header_right"></div>
      </div>
      <div class="calendar" v-show="flag">
        <van-calendar
          :poppable="false"
          color="#fc5500"
          :style="{ height: '610px' }"
          type="range"
          :formatter="formatter"
          @confirm="onConfirm"
        />
      </div>
      <div class="submit" v-show="!flag">
        <div class="hotel">
          <strong>{{ title }}</strong>
        </div>
        <p>{{ describe }}</p>
        <div class="numbernight">
          <div class="night">
            <p>入住</p>
            <p class="time">{{ dateone }}</p>
          </div>
          <div class="night">
            <p>离店</p>
            <p class="time">{{ datetwo }}</p>
          </div>
          <div class="night">
            <p>晚数</p>
            <p>共{{ num }}晚</p>
          </div>
        </div>
        <div class="numroom">
          <p>房间数量</p>
          <div>
            <van-stepper
              v-model="value"
              theme="round"
              button-size="30"
              disable-input
            />
          </div>
        </div>

        <div class="contacts">
          <p><strong>联系人信息</strong></p>
          <van-field
            v-model="name"
            placeholder="建议填写真实姓名"
            label="联系人："
          />
          <van-field
            v-model="tel"
            placeholder="接收确认短信"
            type="tel"
            label="手机号："
          />
          <van-field
            v-model="text"
            placeholder="请填写其他要求，如指定门票"
            label="备注："
          />
        </div>
        <div class="payment">
          <van-radio-group v-model="radio">
            <van-cell-group>
              <div class="zfb">
                <img :src="require('../assets/img/ic_zfb_big.webp')" alt="" />
                <van-cell
                  title="支付宝 （优选）"
                  clickable
                  @click="radio = '1'"
                >
                  <template #right-icon>
                    <van-radio name="1" />
                  </template>
                </van-cell>
              </div>
              <div class="zfb">
                <img :src="require('../assets/img/ic_wx_pay.webp')" alt="" />
                <van-cell title="微信" clickable @click="radio = '2'">
                  <template #right-icon>
                    <van-radio name="2" />
                  </template>
                </van-cell>
              </div>
            </van-cell-group>
          </van-radio-group>
        </div>

        <div class="tab">
          <p>
            ￥<span
              ><strong>{{ price * num * value }}</strong></span
            >
          </p>
          <button @click="booker">提交预订</button>
        </div>
      </div>
      <van-dialog
        v-model="show"
        title="提示"
        show-cancel-button
        @confirm="confirment"
      >
        <p class="check">
          将回到套餐详情页，如需继续支付请至"我的-我的订单"中查看
        </p>
      </van-dialog>
      <van-loading type="spinner" color="#000" v-show="loading" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      dateone: "",
      datetwo: "",
      name: "",
      tel: "",
      text: "",
      value: 1,
      radio: "1",
      title: null,
      describe: null,
      price: null,
      flag: true,
      loading: false,
      num: null,
      packageName: null,
      productImg: null,
      popitemName: null,
      productId: null,
      allorder: [],
      Tobepaid: [],
      Togo: [],
    };
  },
  methods: {
    formatDate(date) {
      return `2022-${date.getMonth() + 1}-${date.getDate()}`;
    },
    onConfirm(date) {
      const [start, end] = date;
      this.dateone = `${this.formatDate(start)}`;
      this.datetwo = `${this.formatDate(end)}`;

      // this.num = end.getDate() - start.getDate();
      console.log(this.dateone);
      console.log(this.datetwo);
      console.log(this.num);
      this.flag = false;
      this.DateDiff(this.dateone,this.datetwo)
    },
    //计算日期间隔天数
    DateDiff(sDate1, sDate2) {
      //sDate1和sDate2是2006-12-18格式
      var aDate, oDate1, oDate2, iDays;
      aDate = sDate1.split("-");
      oDate1 = new Date(aDate[0], aDate[1], aDate[2]); //转换为12-18-2006格式
      aDate = sDate2.split("-");
      oDate2 = new Date(aDate[0], aDate[1], aDate[2]);
      console.log(oDate1,oDate2);
      oDate1=oDate1.getTime()
      oDate2=oDate2.getTime()
      // iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24); //把相差的毫秒数转换为天数
      iDays = parseInt((oDate2-oDate1) / 1000 / 60 / 60 / 24); //把相差的毫秒数转换为天数
      console.log(iDays, "ts");
      this.num=iDays
    //  return  iDays
    },
    formatter(day) {
      if (day.type === "start") {
        day.bottomInfo = "入住";
      } else if (day.type === "end") {
        day.bottomInfo = "离店";
      }
      return day;
    },
    go() {
      if (this.flag != true) {
        if (JSON.parse(localStorage.getItem("Tobepaid"))) {
          this.Tobepaid = JSON.parse(localStorage.getItem("Tobepaid"));
        }
        console.log(this.Tobepaid);
        this.Tobepaid.push({
          bigtitle: this.title,
          packageName: this.packageName,
          value: this.value,
          num: this.num,
          price: this.price,
          dateone: this.dateone,
          productImg: this.productImg,
          datetwo: this.datetwo,
          popitemName: this.popitemName,
          productId: this.productId,
        });
        console.log(this.productImg);
        console.log(this.Tobepaid);
        window.localStorage.setItem("Tobepaid", JSON.stringify(this.Tobepaid));
        this.show = true;
      } else {
        this.$router.go(-1);
      }
    },
    confirment() {
      this.flag = true;
      this.go();
    },
    booker() {
      if (this.name != "" && this.tel != "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.$toast("支付成功");
        }, 2000);

        setTimeout(() => {
          if (JSON.parse(localStorage.getItem("allorder"))) {
            this.allorder = JSON.parse(localStorage.getItem("allorder"));
          }
          if (JSON.parse(localStorage.getItem("Togo"))) {
            this.Togo = JSON.parse(localStorage.getItem("Togo"));
          }
          console.log(this.allorder);
          this.allorder.push({
            bigtitle: this.title,
            packageName: this.packageName,
            value: this.value,
            num: this.num,
            price: this.price,
            dateone: this.dateone,
            productImg: this.productImg,
            datetwo: this.datetwo,
            popitemName: this.popitemName,
            productId: this.productId,
            // ifpay: "已支付",
          });
          this.Togo.push({
            bigtitle: this.title,
            packageName: this.packageName,
            value: this.value,
            num: this.num,
            price: this.price,
            dateone: this.dateone,
            productImg: this.productImg,
            datetwo: this.datetwo,
            popitemName: this.popitemName,
            productId: this.productId,
            // ifpay: "已支付",
          });
          console.log(this.productImg);
          console.log(this.allorder);
          window.localStorage.setItem(
            "allorder",
            JSON.stringify(this.allorder)
          );
          window.localStorage.setItem("Togo", JSON.stringify(this.Togo));
          this.$router.push(
            "/myorder?bigtitle=" +
              this.title +
              "&packageName=" +
              this.packageName +
              "&value=" +
              this.value +
              "&num=" +
              this.num +
              "&price=" +
              this.price +
              "&dateone=" +
              this.dateone +
              "&productImg=" +
              this.productImg +
              "&datetwo=" +
              this.datetwo +
              "&popitemName=" +
              this.popitemName +
              "&productId=" +
              this.productId +
              "&title=" +
              "我的订单"
            // "&ifpay="+
            // "已支付"
          );
        }, 3000);
      } else {
        this.$toast("联系人或手机号不能为空");
      }
    },
    
  },

  created() {
    this.title = this.$route.query.title;
    this.describe = this.$route.query.describe;
    this.price = this.$route.query.price;
    this.packageName = this.$route.query.packageName;
    this.productImg = this.$route.query.productImg;
    this.popitemName = this.$route.query.popitemName;
    this.productId = this.$route.query.productId;
  },
};
</script>

<style lang="scss" scoped>
.data {
  .wrapper {
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
    background-color: #f0eee2;
    .header {
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      padding: 0 16px;
      position: sticky;
      left: 0;
      top: 0;
      z-index: 1;

      .header_left {
        color: #fc9632;
        font-size: 20px;
        line-height: 50px;
      }
      .header_center {
        font-size: 18px;
      }
      .header_right {
        width: 20px;
      }
    }
    .calendar {
      height: 100%;
      .van-calendar ::v-deep .van-calendar__header-title {
        display: none;
      }
      .van-calendar ::v-deep .van-calendar__body {
        padding-bottom: 36px;
      }
      .van-calendar ::v-deep .van-calendar__footer {
        padding: 0;
        position: fixed;
        bottom: 0;
        left: 0;
        background-color: #fff;
        width: 100%;
      }
    }
    .submit {
      background-color: #fff;
      // margin: 15px 0;
      padding: 0 16px 16px;
      .hotel {
        font-size: 18px;
        height: 50px;
        line-height: 50px;
        color: rgb(65, 50, 39);
      }
      & > p {
        width: 250px;
        font-size: 14px;
      }
      .numbernight {
        margin: 15px 0;
        background-color: #f8f4e6;
        padding: 20px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;

        .night {
          p {
            &:nth-child(1) {
              color: #999;
              font-size: 12px;
            }
            &:nth-child(2) {
              font-weight: bold;
              padding-top: 10px;
            }
          }
          p.time {
            font-size: 16px;
          }
        }
      }
      .numroom {
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        p {
          color: rgb(146, 134, 114);
        }
        .van-stepper {
          background-color: #f8f3e2;
          border-radius: 15px;
        }
        .van-stepper ::v-deep .van-stepper__minus {
          color: #fff;
          background-color: #ffc267;
          border: 1px solid #ee0a24;
        }
        .van-stepper ::v-deep .van-stepper__plus {
          background-color: #fc9632;
        }
        .van-stepper ::v-deep .van-stepper__minus::before,
        .van-stepper ::v-deep .van-stepper__plus::before {
          height: 3px;
        }
        .van-stepper ::v-deep .van-stepper__plus::after {
          width: 3px;
        }
      }
      .contacts {
        p {
          padding: 10px 0;
        }
        .van-cell {
          padding: 10px 0;
        }
      }
      .payment {
        margin-top: 15px;
        .zfb {
          display: flex;
          align-items: center;
          img {
            width: 25px;
            height: 25px;
          }
        }
      }
      .tab {
        position: fixed;
        bottom: 0;
        left: 0;
        display: flex;
        height: 52px;
        width: 100%;
        background-color: #fff;
        align-items: center;
        justify-content: space-between;
        p {
          color: #fd6a07;
          font-size: 14px;
          padding-left: 12px;
          flex: 1;
          span {
            font-size: 20px;
          }
        }
        button {
          width: 236px;
          color: #fff;
          background-color: #ff9100;
          height: 52px;
          border: 0;
        }
      }
    }
    p.check {
      text-align: center;
      padding: 20px 30px;
    }
    .van-loading {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
</style>